<template>
  <el-header>
    <h1>
      <a href="/">
        <div class="img-box">
          <img src="../../assets/img/logo.png" alt />
        </div>
        <span>凡客后端管理系统</span>
      </a>
    </h1>
    <el-dropdown trigger="click" @command="handleCommand">
      <span class="el-dropdown-link" v-if="$store.state.user.userInfo.name?true:false">
        {{$store.state.user.userInfo.name?$store.state.user.userInfo.name + " 欢迎你！个人中心":'个人中心'}}
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <span class="el-dropdown-link" v-if="$store.state.user.userInfo.name?false:true" @click="toLogin">去登录</span>
      <el-dropdown-menu slot="dropdown" style="top:36px" v-if="$store.state.user.userInfo.name?true:false">
        <el-dropdown-item icon="el-icon-plus" command="changepsw">修改密码</el-dropdown-item>
        <el-dropdown-item icon="el-icon-circle-plus" command="exit">退出</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="500px">
      <el-form
        :model="pwdform"
        ref="pwdform"
        label-width="100px"
        label-position="right"
        status-icon
        style="width:400px;"
        :rules="rules"
      >
        <el-form-item label="原密码" prop="oldPwd">
          <el-input v-model="pwdform.oldPwd" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPwd">
          <el-input v-model="pwdform.newPwd" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPwd">
          <el-input v-model="pwdform.checkPwd" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updataPwd('pwdform')">确定</el-button>
        <el-button @click="$refs['pwdform'].resetFields()">重置</el-button>
      </div>
    </el-dialog>
  </el-header>
</template>

<script>
import headerApi from "@/api/header";
export default {
  data() {
    let checkOldpass = (rule, value, callback) => {
      //校验原密码是否准确
      headerApi
        .checkPwd(this.$store.state.user.userInfo.name, value)
        .then(res => {
          if (res.data.flag) {
            callback();
          } else {
            callback(new Error("密码不正确"));
          }
        })
        .catch(err => {
          console.log("ajax错误", err);
        });
    };
    let checkNewPass = (rule, value, callback) => {
      //验证两个新密码是否一致
      if (value == "") {
        callback(new Error("请再次输入新密码"));
      } else if (value !== this.pwdform.newPwd) {
        callback(new Error("两次输入密码不一致"));
      } else {
        callback();
      }
    };
    return {
      dialogFormVisible: false, //修改密码框显示
      pwdform: {
        oldPwd: "",
        newPwd: "",
        checkPwd: ""
      },
      rules: {
        oldPwd: [{ required: true, validator: checkOldpass, trigger: "blur" }],
        newPwd: [{ required: true, message: "请输入新密码", trigger: "blur" }],
        checkPwd: [{ required: true, validator: checkNewPass, trigger: "blur" }]
      }
    };
  },

  components: {},

  methods: {
    handleCommand(command) {
      //功能:点击个人中心，触发这里的代码
      if (command == "changepsw") {
        //修改密码
        this.dialogFormVisible = true;
        this.$nextTick(() => {
          this.$refs["pwdform"].resetFields();
        });
      } else {
        //退出登录
        this.$confirm("你忍心退出吗？", "提示", {
          confirmButtonText: "忍心退出",
          cancelButtonText: "再等一会",
          type: "warning"
        })
          .then(() => {
            this.$store.dispatch("logout");
            this.$message({
              type: "success",
              message: "退出成功!"
            });
            this.$router.push("/login");
            // this.exit();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消"
            });
          });
      }
    },
    //转跳去登录
    toLogin() {
      this.$router.push("/login");
    },
    // 修改密码
    updataPwd(pwdform) {
      this.$refs[pwdform].validate(valid => {
        if (valid) {
          //验证通过，提交修改
          this.updataUserPass(this.$store.state.user.userInfo.name, this.pwdform.newPwd);
        } else {
          //验证不通过
          return false;
        }
      });
    },
    //修改密码 ajax请求
    async updataUserPass(username, userpass) {
      try {
        let p = await headerApi.updPwd(username, userpass);
        if (p.data.flag) {
          this.$message({
            message: p.data.message + ",请重新登录",
            type: "success"
          });
          this.dialogFormVisible = false;
          this.$router.push("/login");
        } else {
          this.$message({
            message: "密码修改失败",
            type: "error"
          });
        }
      } catch (err) {
        console.log("ajax请求错误", err);
      }
    }
  }
};
</script>

<style scoped>
@import "~@/assets/scss/appHeader.scss";
</style>